<template>
  <div>
    <el-button
      style="
        color: red;
        font-size: 30px;
        position: absolute;
        top:-117px;
        left:100px
      "
      type="text"
      @click="showPeople"
      >点击查看参加人员</el-button
    >
    <el-dialog
      append-to-body
      title="参加人员名单"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="gridData">
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Show3",
  data() {
    return {
      gridData: [],
      dialogTableVisible: false,
      peoples:[]
    };
  },
  methods: {
    showPeople() {
      this.peoples = []
      this.dialogTableVisible = true;
      const Inf = {
        token:localStorage.getItem("token")
      }
      this.$store.dispatch("getPeople",Inf);
      setTimeout(() => {
        for(var i = 0; i < this.people.length; i++) {
          const peopleInf = {
            name:this.people[i].name
          }
          this.peoples.push(peopleInf)
        }
        console.log(this.peoples);
        this.gridData = this.peoples;
        console.log(this.gridData);
      }, 500);
    },
  },
  computed: {
    ...mapState({
      people: (state) => state.one.people,
    }),
  },
};
</script>

<style scoped>
</style>